<template>
  <view>
    <view class="header-box">
      <view style="background-color: #fff;">
        <view class="search-box flex align-center">
          <image class="search-icon"
                 src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/search-icon.png" mode="">
          </image>
          <input type="text" v-model="queryParams.searchValue" @confirm="searchHandel" placeholder="搜索">
        </view>
      </view>
      <view style="background-color: #fff;">
        <u-tabs :activeStyle="activeStyle" :current="current" lineColor="#FF7947" :list="tabList"
                @click="click" :scrollable="false"></u-tabs>
      </view>
    </view>
    <view class="item-box" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
      <view class="flex align-center justify-between top-price">
        <text class="price-title">租房费用</text>
        <view class="state-title">
          <dict-tag :options="dict.type.refund_order_state" :value="item.checkOutOrder.refundOrderState"
                    v-if="item.orderState==107||item.orderState==108"/>
          <dict-tag :options="dict.type.audit_process" :value="item.orderAuditRecord.auditProcess"
                    v-if="item.orderState==103||item.orderState==104||item.orderState==105"/>
        </view>
      </view>
      <view class="flex house-box">
        <image class="house-img" :src="item.apartmentPictureList[0]" mode="aspectFill">
        </image>
        <view class="house-box-right">
          <view class="main-title">{{ item.housingAllocation.apartmentDescription }}</view>
          <view class="tip-title">{{ item.premisesAddress }}</view>
          <view class="tip-title">{{ item.housingAllocation.title }}</view>
          <!--          <view class="actual-price">-->
          <!--            退款金额￥{{ item.checkOutOrder.totalRefundAmount ? item.checkOutOrder.totalRefundAmount : 0 }}-->
          <!--          </view>-->
          <view class="actual-price"
                v-if="item.checkOutOrder && ['5','6'].includes(item.checkOutOrder.refundOrderState)">
            补缴金额￥{{ item.supplementaryPayment ? item.supplementaryPayment : 0 }}
          </view>
          <view class="actual-price"
                v-if="item.orderAuditRecord || item.checkOutOrder && ['1','2','3'].includes(item.checkOutOrder.refundOrderState)">
            退款金额￥{{ item.refundAmount ? item.refundAmount : 0 }}
          </view>

        </view>
      </view>
      <view class="flex justify-end">
        <button class="pay-btn" @click.stop="payHandel(item)" v-if="item.checkOutOrder.refundOrderState==='5'">立即支付
        </button>
      </view>
    </view>
    <u-loading-icon text="加载中" :show="loading"></u-loading-icon>
    <view v-if="!loading && total == 0" style="padding: 30rpx">
      <u-empty mode="order"/>
    </view>

  </view>
</template>

<script>
import {
  refundOrderList,
  supplementaryPayment,
} from '@/api/order';

export default {
  dicts: ["audit_process", "refund_order_state"],
  data() {
    return {
      activeStyle: {
        "font-weight": "800",
        "font-size": "32rpx",
        "color": "#111111"
      },
      tabList: [{
        name: '全部',
        value: '',
      }, {
        name: '退款',
        value: '1',
      }, {
        name: '补缴',
        value: '2',
      }],
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // orderState: '',
        isRefundFlag: '',
        searchValue: '',
      },
      current: 0,
      loading: false,
    }
  },
  computed: {
    refundOrderType() {
      return (item) => {
        if (item.checkOutOrder && ['5', '6'].includes(item.checkOutOrder.refundOrderState)) {
          return 2
        } else {
          //退房订单
          if (item.orderState == 107 || item.orderState == 108) return 1
          //退订订单
          if (item.orderState == 103 || item.orderState == 104 || item.orderState == 105) return 0
        }
      }
    }
  },
  onLoad(opt) {
    this.getList();
  },
  onReachBottom() {
    if (this.list.length < this.total) {
      this.queryParams.pageNum++;
      this.getList()
    }
  },
  methods: {
    searchHandel() {
      this.resetForm();
      this.getList();
    },
    payHandel(row) {
      let data = {
        orderId: row.orderId,
        openId: this.$store.state.user.userInfo.openid
      }
      let type = this.refundOrderType(row)
      supplementaryPayment(data).then(res => {
        let option = res.data;
        wx.requestPayment({
          timeStamp: option.timeStamp + "",
          nonceStr: option.nonceStr,
          package: option.package,
          signType: 'MD5',
          paySign: option.paySign,
          success: (success) => {
            uni.showToast({
              title: '支付成功',
              icon: 'success',
            })
            this.$tab.navigateTo('/pages/main/order/paySuccess?orderId=' + row.orderId + '&type=' + type + '&orderType=2')
          },
          fail(err) {
            console.log('err', err);
            uni.showToast({
              title: '你已取消支付！',
              icon: 'none',
            })

          }
        })
      })
    },
    getList() {
      this.loading = true;
      refundOrderList(this.queryParams).then(res => {
        this.loading = false;
        let list = res.rows;
        list.map(item => {
          item.apartmentPictureList = item.housingAllocation ? item.housingAllocation.apartmentPicture.split(',') : ''
        })
        this.total = res.total;
        if (this.queryParams.pageNum == 1) {
          this.list = list; // 第一次请求数据，将数据保存到list中
        } else {
          this.list = this.list.concat(list); // 非第一次请求数据，将数据添加到list中
        }
      }).catch(e => {
        console.log(e)
        this.loading = false;
        this.total = 0

      })
    },
    click(e) {
      this.resetForm();
      // this.queryParams.orderState = e.value;
      this.queryParams.isRefundFlag = e.value;
      this.getList();
    },
    resetForm() {
      this.queryParams.pageNum = 1;
      this.list = [];
      this.total = 0;
    },
    toDetail(row) {
      let type = this.refundOrderType(row)
      uni.navigateTo({
        url: `/pages/main/order/refundOrderDetail?orderId=${row.orderId}&type=${type}`
      })
    }
  }
}
</script>

<style lang="scss">
.header-box {
  position: sticky;
  top: 0;
  z-index: 999;
}

.item-box {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-top: 30rpx;
  width: 690rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;

  .pay-btn {
    //width: 160rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: #FF7947;
    border-radius: 34rpx 34rpx 34rpx 34rpx;
    border: 2rpx solid #FF7947;

    font-weight: 500;
    font-size: 26rpx;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;

    margin: 0;
  }

  .top-price {
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid rgba(112, 112, 112, 0.1);

    .state-title {

      font-weight: bold;
      font-size: 28rpx;
      color: #FF7947;
      font-style: normal;

    }
  }

  .time-box {
    width: 630rpx;
    height: 72rpx;
    background: #F5F7FB;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-top: 24rpx;
    margin-bottom: 24rpx;

    font-weight: 500;
    font-size: 24rpx;
    color: #000000;
    text-align: left;
    font-style: normal;


    .time-icon {
      width: 27rpx;
      height: 28rpx;
      margin-left: 20rpx;
      margin-right: 10rpx;
    }
  }

  .house-box {
    margin-top: 24rpx;

    .house-img {
      width: 132rpx;
      //height: 132rpx;
      height: 164rpx;
      border-radius: 20rpx;
      margin-right: 18rpx;
      background: #eee;
    }

    .house-box-right {
      width: 480rpx;
    }

    .main-title {

      font-weight: 800;
      font-size: 28rpx;
      color: #111111;
      text-align: left;
      font-style: normal;
      margin-bottom: 10rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tip-title {

      font-weight: 400;
      font-size: 24rpx;
      color: #757575;
      text-align: left;
      font-style: normal;

      margin-bottom: 10rpx;
    }

    .actual-price {

      font-weight: bold;
      font-size: 24rpx;
      color: #111111;
      text-align: left;
      font-style: normal;

    }

  }

  .price-title {

    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    text-align: left;
    font-style: normal;

  }

}

.search-box {
  box-sizing: border-box;
  padding: 0 20rpx;
  width: 690rpx;
  height: 76rpx;
  margin-left: 30rpx;
  background: #F5F6FA;
  border-radius: 20rpx 20rpx 20rpx 20rpx;


  .search-icon {
    width: 26rpx;
    height: 26rpx;
    margin-right: 8rpx;
  }
}
</style>
